<template>
  <div class="parent_container">
    <van-card v-for="(item,index) in data" :desc="item.description" :thumb="item.imageUrl" class="resultItem" :key="index"
              @click="showGood(item.id)">
      <template #title>
        <p class="title">{{ item.title }}</p>
      </template>
      <template #price>
          <span class="price_container">
            <span class="salePrice">{{ item.salePrice | moneyFormat }}</span>
            <del class="price">原价：{{ item.price  | moneyFormat }}</del>
          </span>
      </template>
    </van-card>

    <div class="in-bottom">到底啦 ~~</div>
  </div>
</template>

<script>
import filter from "../filters/filter";

export default {
  name: "tabItem",
  props: {
    data: {type: Array, default: () => []}
  },
  filters: {
    moneyFormat(money) {
      return filter.moneyFormat(money);
    }
  },
  methods: {
    showGood(id) {
      this.$emit("showGood", id);
    }
  }
};
</script>

<style lang="less" scoped>

.parent_container {
  padding: .5rem .3rem .5rem .3rem;

  .resultItem {
    background-color: #fff;
    box-shadow: 0 0 10px #eee;
    margin-bottom: .7rem;

    .title {
      font-size: .8rem;
      font-weight: bold;
      margin: 0 0 .3rem 0;
    }

    .price_container {
      .salePrice {
        margin-right: .5rem;
        font-size: 1rem;
        color: #786AE4;
      }
    }
  }
}

.in-bottom {
  width: 100%;
  text-align: center;
  color: #666;
  font-size: 14px;
  margin: 10px 0;
}
</style>
